<template>
  <div class="commentsBody">
      <div class="song">
          <img :class="{'active':isMusic}" :src="imgUrl" alt="">
          <div>
            <h3>{{title}}</h3>
            <p v-show="name">{{text}} {{name}}</p>
          </div>

      </div>
      <ul class="hotCommentsList">
          <li v-for="(value) in comments.hotComments" :key='value.commentId'>
              <div class="user">
                  <div class="userLeft">
                    <img :src="value.user.avatarUrl" alt="">
                    <div class="userLeftText">
                        <span>{{value.user.nickname}}</span>
                        <p>{{value.timeStr}}</p>
                    </div>
                  </div>
                  <div class="userRight">
                      <p>{{value.likedCount}} ❤</p>
                  </div>
              </div>
              <p class="content">{{value.content}}</p>
          </li>
      </ul>
      <ul class="commentsList">
          <li v-for="(value) in comments.comments" :key='value.commentId'>
              <div class="user">
                  <div class="userLeft">
                    <img :src="value.user.avatarUrl" alt="">
                    <div class="userLeftText">
                        <span>{{value.user.nickname}}</span>
                        <p>{{value.timeStr}}</p>
                    </div>
                  </div>
                  <div class="userRight">
                      <p>{{value.likedCount}} ❤</p>
                  </div>
              </div>
              <p class="content">{{value.content}}</p>
          </li>
      </ul>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  name: 'commentsBody',
  methods: {
    ...mapActions([
      'setCommentsList',
      'setIsCommentsList'
    ])
  },
  data () {
    return {
      imgUrl: '',
      title: '',
      name: '',
      isMusic: false,
      text: 'by'
    }
  },
  computed: {
    ...mapGetters(['comments', 'isComments'])
  },
  mounted () {
    this.$bus.$on('commentsImg', (url, title, name, music) => {
      console.log(url, title, name)
      this.imgUrl = url
      this.title = title
      this.name = name
      if (music === 'music') {
        this.isMusic = true
        this.text = '--'
      } else {
        this.isMusic = false
        this.text = 'by'
      }
    })
  }

}
</script>

<style scoped lang='scss'>
@import "../../assets/css/variable";
@import "../../assets/css/mixin";
.commentsBody{
    .song{
        width: 100%;
        height: 240px;
        @include bg_sub_color();
        @include font_color();
        // background-color: red;
        border-bottom: 20px solid #eee;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        img{
            width: 200px;
            height: 200px;
            border-radius: 20px;
            margin: 20px;
            box-sizing: border-box;
            &.active{
                 border-radius: 50%;
                 border: 25px solid #000;
            }
        }
        div{
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
            h3{
                font-size: 40px;
                width: 100%;
            }
        }
    }
    ul{
        width: 100%;
        li{
            @include font_color();
            width: 100%;
            border-bottom: 1px solid #ccc;
            // display: flex;
            img{
                width: 100px;
                height: 100px;
                border-radius: 50%;
            }
            .user{
                display: flex;
                justify-content: space-between;
                padding: 10px 30px;
                .userLeft{
                    display: flex;
                    .userLeftText{
                        display: flex;
                        flex-direction: column;
                        margin-left: 20px;
                        span{
                            padding: 20px 0;
                        }
                        p{
                            font-size: 22px;
                        }
                    }
                }
            }
            .content{
                width: 70%;
                padding-left: 150px;
                padding-bottom: 20px;
                line-height: 36px;
            }
        }
    }
}
</style>
